<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <style media="screen">
      body{
        height: 2000px;
        background-image: url('bg.jpg');
        background-size: contain;
      }
      .container{
        width: 500px;
        position: relative;
        margin:0px auto;
      }
      .container img{
        position: absolute;
        transition: 1s transform;
      }
      .container img:nth-child(1){
        transform: rotate(45deg)  translate(0px,0px);
      }
      .container img:nth-child(2){
        transform: rotate(-45deg) translate(50px,300px);
      }
      .container img:nth-child(3){
        transform: rotate(45deg) translate(220px,250px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="1.jpg" alt="1">
      <img src="2.jpg" alt="2">
      <img src="3.jpg" alt="3">
    </div>
    <script type="text/javascript">
      if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',function () {
          alert('test1')
        },false)
        window.onmousewheel=function (info) {
          console.log(info)
          scrollTop=document.documentElement.scrollTop;
          deltaY=info.deltaY;
          let imgs=document.getElementsByTagName('img');
          // console.log(imgs)
          if(deltaY>0){
            imgs[0].style.transform='rotate(45deg)   translate(-200px,-200px)'
            imgs[1].style.transform='rotate(-45deg)   translate(-300px,-800px)'
            imgs[2].style.transform='rotate(45deg)   translate(-200px,-200px)'
          }else if(deltaY<0&&scrollTop<200){
            imgs[0].style.transform='rotate(45deg)   translate(0px,0px)'
            imgs[1].style.transform='rotate(-45deg)   translate(50px,300px)'
            imgs[2].style.transform='rotate(45deg)   translate(220px,250px)'

          }
          // alert('you have moved'+info.deltaY+'px')
        }
      }
    </script>
  </body>
</html>
